{include "INC_header.html" title="分组/权限管理"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container">
            <header class="border-bottom light-background padding"><a-button type="primary" @click="editItem(null)"><i class="fa fa-plus margin-right-half"></i> 添加标签</a-button></header>
            <main class="flex-column overflow-hidden">
                <div class="ui table scroll-enable primary selectable" v-if="list.length > 0" style="border: none; border-radius: 0;">
                    <!-- 表格头部 -->
                    <div class="thead">
                        <div class="ui row">
                            <div class="col" v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">{{ column.title }}</div>
                        </div>
                    </div>
                    <!-- 表格内容 -->
                    <div class="tbody">
                        <div class="ui row" v-for="(item, index) in list">
                            <div class="col justify-center" v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">
                                <div v-if="column.key === 'action'">
                                    <a-button type="primary" size="small" @click="editItem(item)">修改</a-button>
                                    <a-popconfirm
                                            title="确定删除该标签？"
                                            ok-text="删除"
                                            cancel-text="取消"
                                            @confirm="delItem(item.id)">
                                        <a-button danger class="margin-left" size="small">删除</a-button>
                                    </a-popconfirm>
                                </div>
                                <template v-else>
                                    {{ item[column.dataIndex] || '-' }}
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="empty-content" style="border: none; border-radius: 0;" v-else>
                    <a-empty :image="simpleImage" description="没有标签数据"></a-empty>
                </div>
            </main>
        </div>
        <!-- 标签/分组添加 -->
        <a-modal
                v-model:visible="item.edit"
                :title="(item.id > 0 ? '修改标签' : '添加新标签') + '，按Enter可提交保存。'"
                :confirm-loading="saveLoading"
                cancel-text="取消"
                ok-text="保存"
                @ok="saveItem">
            <a-input type="text" v-model:value="item.name" placeholder="填写名称，按Enter可保存！" :maxlength="20" @keyup.enter="saveItem"/>
        </a-modal>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, Empty } = antd;
    const app = createApp({
        data() {
            return {
                config: window.appProviderConfig,
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //表头
                columns: [
                    { title:"标签名", dataIndex:"name", key:"name" },
                    { width:'100px', title:"账户数量", dataIndex:"users", key:"users"},
                    { width:'120px', title:"操作", key:"action" }
                ],
                //数据
                list: [],
                //
                delLoading: false,
                saveLoading: false,
                //
                item: {
                    edit: false,
                    id: 0,
                    name: ''
                }
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                //获取列表数据
                this.getList();
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/sso/api/admin/label/list'}").then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            delItem: function (id) {
                this.delLoading = true;
                let self = this;
                axios.post("{url url='/sso/api/admin/label/delete'}", {
                    id
                }).then(({ data }) => {
                    self.delLoading = false;
                    if (data.error === 0) {
                        self.getList();
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.delLoading = false;
                    message.error("服务端繁忙");
                });
            },
            editItem: function (item) {
                item = item || {
                    id: 0,
                    name: ''
                };
                this.item.id = item.id;
                this.item.name = item.name;
                this.item.edit = true;
            },
            saveItem: function () {
                if (this.item.name.toString().length < 2) {
                    return message.error("名称至少2个字符");
                }
                this.saveLoading = true;
                let self = this;
                axios.post("{url url='/sso/api/admin/label/save'}", {
                    id: this.item.id,
                    name: this.item.name
                }).then(({ data }) => {
                    self.saveLoading = false;
                    if (data.error === 0) {
                        message.success("已保存：" + self.item.name);
                        self.item.edit = false;
                        self.item.id = 0;
                        self.item.name = '';
                        //重载
                        self.getList();
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.saveLoading = false;
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent.length > 0) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"标签管理" }
            ]
        });
    }
</script>
{include "INC_footer.html"}